<script setup lang="ts">
import { ref, onMounted } from 'vue';

interface Category {
  id: number;
  name: string;
  count: number;
  color: string;
  description: string;
}

const categories = ref<Category[]>([
  { id: 1, name: '技术分享', count: 25, color: '#4F46E5', description: '前端、后端、移动端等技术文章' },
  { id: 2, name: '生活随笔', count: 18, color: '#059669', description: '日常生活感悟和随想' },
  { id: 3, name: '学习笔记', count: 32, color: '#DC2626', description: '各种学习资料和笔记整理' },
  { id: 4, name: '项目经验', count: 15, color: '#7C2D12', description: '项目开发中的经验总结' },
  { id: 5, name: '工具推荐', count: 12, color: '#9333EA', description: '好用的开发工具和软件推荐' },
  { id: 6, name: '读书笔记', count: 8, color: '#0891B2', description: '读书心得和知识总结' }
]);

const selectedCategory = ref<Category | null>(null);

function selectCategory(category: Category) {
  selectedCategory.value = category;
}

onMounted(() => {
  console.log('分类页面已加载');
});
</script>

<template>
  <div class="category-page">
    <el-card class="mb-16px">
      <template #header>
        <div class="card-header">
          <span class="text-20px font-bold">文章分类</span>
          <el-tag type="info">共 {{ categories.length }} 个分类</el-tag>
        </div>
      </template>
      <div class="text-gray-700 dark:text-gray-200">
        <p>这是分类测试页面，展示不同的文章分类信息。</p>
      </div>
    </el-card>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16px mb-16px">
      <el-card 
        v-for="category in categories" 
        :key="category.id"
        class="category-card cursor-pointer hover:shadow-lg transition-all duration-300"
        :class="{ 'ring-2 ring-primary': selectedCategory?.id === category.id }"
        @click="selectCategory(category)"
      >
        <div class="flex items-center mb-12px">
          <div 
            class="w-4 h-4 rounded-full mr-8px"
            :style="{ backgroundColor: category.color }"
          ></div>
          <h3 class="text-16px font-bold">{{ category.name }}</h3>
          <el-tag class="ml-auto" size="small">{{ category.count }} 篇</el-tag>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-14px">{{ category.description }}</p>
      </el-card>
    </div>

    <el-card v-if="selectedCategory">
      <template #header>
        <div class="card-header">
          <span class="text-16px font-bold">选中分类详情</span>
        </div>
      </template>
      <div class="flex items-center">
        <div 
          class="w-6 h-6 rounded-full mr-12px"
          :style="{ backgroundColor: selectedCategory.color }"
        ></div>
        <div>
          <h4 class="text-18px font-bold mb-4px">{{ selectedCategory.name }}</h4>
          <p class="text-gray-600 dark:text-gray-400">{{ selectedCategory.description }}</p>
          <p class="text-14px text-gray-500 mt-8px">包含 {{ selectedCategory.count }} 篇文章</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-card:hover {
  transform: translateY(-2px);
}
</style> 